import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, Col, Row, DatePicker} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";


class QinShiStatusShort extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba']

  state = {
    start: time.getStartOfDay(),
    end: time.getEndOfDay(),
    option: {

      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['当前值', '预测值']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        max: function (value) {
          return value.max + 20;
        },
        min: function (value) {
          return value.min - 20;
        }
      },

      series: [
        {
          name: '当前值',
          type: 'line',
          data: []
        },
        {
          name: '预测值',
          type: 'line',
          data: []
        }
      ]
    }
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    const {activinessPredictShort,} = nextProps;
    const {option, chart} = prevState;

    // 当传入的type发生变化的时候，更新state
    if (chart && activinessPredictShort && activinessPredictShort !== prevState.activinessPredictShort) {
      option.series[0].data = activinessPredictShort.current;
      option.series[1].data = activinessPredictShort.predict;
      option.xAxis.data = activinessPredictShort.date;

      chart.setOption(option, true);
      return {activinessPredictShort}
    }

    return null;
  }


  async componentDidMount() {
    const payload = await getMockTime("LuGangPredict")
    const {start, end} = payload
    this.props.dispatch({
      type: 'lugang/getActivinessPredictShort',
      payload: {
        start: dateFormat(start),
        end: dateFormat(end),
      }
    });
    // const {hasParent = false} = this.props;

    // 基于准备好的dom，初始化echarts实例
    this.state.chart = echarts.init(document.getElementById("activePredictShort"));
    // 绘制图表
    this.state.chart.setOption(this.state.option);
    addResizeHook(this, this.state.chart.resize)

    this.setState({start, end})
  }

  componentWillUnmount() {
    // cancelAnimationFrame(this.reqRef);
    // this.stopLoop = true
  }

  render() {
    const {
      width = 100,
      height = 350
    }
      = this.props;
    return (
      <div>
        {/*<RangePicker*/}
        {/*  key={Math.random()} //强制刷新组件*/}
        {/*  style={{width: 400}}*/}
        {/*  showTime={{format: 'HH'}}*/}
        {/*  format={dateFormat}*/}
        {/*  placeholder={['开始时间', '结束时间']}*/}
        {/*  onOk={this.timePick}*/}
        {/*  defaultValue={[moment(displayStartTime, dateFormat), moment(displayEndTime, dateFormat)]}*/}
        {/*/>*/}

        <div id="activePredictShort" style={{width: `${width}%`, height}}/>
      </div>

    )
  }
}

export default connect(({lugang, global}) => ({
  activinessPredictShort: lugang.activinessPredictShort,
  global
}))
(QinShiStatusShort);
